<template>
  <view class="app-page-wrap">
    <view class="top-search">
      <uni-easyinput prefixIcon="search" maxlength="50" v-model="search.name" placeholder="请选择客户"
        @click.native="openSelectSearch" disabled="true">
      </uni-easyinput>
      <button @click="resetForm">重置</button>
    </view>
    <view class="balance-wrap">
      <view class="text">账户余额</view>
      <view class="value">￥{{ money || '0.00' }}</view>
    </view>
    <view class="content-wrap">
      <view class="list" v-for="(item,index) in list" :key="index">
        <view class="title">{{item.customerName}}</view>
        <view :class="{'content-balance':true,'no-border-bt': oneYearAccShow}">
          <view>
            <text class="label">现金余额：</text>
            <text class="value">￥{{item.cashBalance}}</text>
          </view>
          <view>
            <text class="label">承兑余额：</text>
            <text class="value">￥{{item.acceptanceBalance}}</text>
          </view>
        </view>
        <view class="content-balance" v-if="oneYearAccShow" style="padding-top:0;">
          <view>
            <text class="label">一年承兑余额：</text>
            <text class="value">￥{{item.oneYearAcceptanceAccountBalance || 0}}</text>
          </view>
        </view>
        <view class="footer">
          <button type="default" @click="linkTradeRecordsFn(item)">交易记录</button>
        </view>
      </view>
    </view>
    <uni-load-more :status="isMore" />
    <select-search ref="selectSearchRef" :show="isShowSearchPop" :type="'radio'" :name="'customerName'"
      :value="'customerId'" :dataLists="customerList" :param="search.id" @search="searchCustomerFn"
      @cancel="cancelSelectFn" @submit="submitCustomerFn"></select-search>
  </view>
</template>
<script>
import config from '@/config';
  import { getBasisDeploy } from "@/api/system/user.js"
  import { toast } from '@/utils/common';
  import { getTenantId, getDriverId } from '@/utils/auth';
  import { getClientList, getBalances, getTotalBalance, customerRecharge, customerDeduction } from "@/api/customerAccount"
  export default {
    computed: {
      balanceBg() {
        if (this.$store.state.user.curTypeColor == '#D22C2C') {
          return `background: url(${config.baseImgUrl}/balance-red-bg.png) no-repeat;background-size: cover;`;
        } else {
          return `background: url(${config.baseImgUrl}/balance-bg.png) no-repeat;background-size: cover;`;
        }
      }
    },
    data() {
      return {
        oneYearAccShow: false,
        search: {
          id: undefined,
          name: undefined
        },
        queryParam: {
          current: 1,
          pageSize: 20
        },
        list: [],
        money: 0.00,
        isMore: 'more',
        customerList: [],
        cacheCustomerList: [],
        isShowSearchPop: false
      }
    },
    async onShow() {
    let res = await getBasisDeploy(getTenantId())
      if (res.code == 200) {
        this.oneYearAccShow = res?.data?.deductionSequence == 20 ? true : false
      }
      this.getClientList()
      this.resetForm()
    },
    onReachBottom() {
      if (this.isMore === 'more') {
        this.queryParam.current++
        this.getBalances()
      }
    },
    onPullDownRefresh() {
      this.resetForm()
    },
    methods: {
      openSelectSearch() {
        this.isShowSearchPop = true
        this.customerList = JSON.parse(JSON.stringify(this.cacheCustomerList))
      },
      resetForm() {
        this.search = {
          id: undefined,
          name: undefined
        }
        this.list = []
        this.isMore = 'more'
        this.queryParam.current = 1;
        this.$refs.selectSearchRef.resetData()
        this.getTotalBalance()
        this.getBalances()
      },
      searchCustomerFn(keyword) {
        this.customerList = this.cacheCustomerList.filter(e => e.customerName.includes(keyword))
      },
      cancelSelectFn() {
        this.isShowSearchPop = false
      },
      submitCustomerFn(value) {
        this.search = {
          id: value.customerId,
          name: value.customerName
        }
        this.list = []
        this.isMore = 'more'
        this.queryParam.current = 1;
        this.getTotalBalance()
        this.getBalances()
        this.isShowSearchPop = false
      },
      linkTradeRecordsFn(data) {
        this.$tab.navigateTo(`/packageA/pages/customerAccount/tradeRecords?customerId=${data.customerId}&cashBalanceId=${data.cashBalanceId}&acceptanceBalanceId=${data.acceptanceBalanceId}&oneYearAccId=${data.oneYearAcceptanceAccountId}`);
      },
      async getClientList() {
        const res = await getClientList(getDriverId())
        if (res.code === '200') {
          this.cacheCustomerList = res?.data || []
          this.customerList = [...this.cacheCustomerList]
        }
      },
      getBody() {
        const data = {
          tenantId: getTenantId(),
          userId: getDriverId(),
          smallProgramType: 1,
        }
        if (this.search.id) {
          data['customerId'] = this.search.id
        }
        return data
      },
      async getTotalBalance() {
        const res = await getTotalBalance(this.getBody())
        if (res.code === '200') {
          this.money = res?.data?.balanceTotal || 0.00
        } else {
          toast(res.msg)
        }
      },
      async getBalances() {
        const res = await getBalances({ ...this.queryParam, ...this.getBody() })
        if (res.code === '200') {
          try {
            const result = res?.data?.rows || []
            const total = res?.data?.total || 0
            this.list = [...this.list, ...result]
            this.setIsMore(total)
          } finally {
            wx.hideNavigationBarLoading();
            wx.stopPullDownRefresh();
          }
        }
      },
      setIsMore(total) {
        if (total == this.list.length) {
          this.isMore = 'noMore';
        } else {
          this.isMore = 'more';
        }
      },
    }
  }
</script>
<style lang="scss" scoped>
  .app-page-wrap {
    height: 100vh;

    .top-search {
      padding: 10px;
      display: flex;
      align-items: center;
      background-color: #ffffff;
      border-bottom: 1px solid #F1F2F5;

      input {
        flex: 1;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        border-radius: 4px;
        margin-right: 20rpx;
        background-color: #F1F2F5;
      }

      button {
        margin-left: 10rpx;
      }
    }

    .balance-wrap {
      padding: 24px 0;
      height: 110px;
      color: #ffffff;
      text-align: center;
      border-radius: 8px;
      margin: 10px 16px;
      background: linear-gradient(107deg, #1fbcff 0%, #4a72ff 100%);

      .text {
        padding-left: 10px;
        font-size: 15px;
      }

      .value {
        font-size: 38px;
      }
    }

    .content-wrap {
      .list+.list {
        margin-top: 10px;
      }

      .list {
        margin: 0 16px;
        border-radius: 8px;
        padding: 15px 10px 10px 10px;
        background-color: #ffffff;

        .title {
          font-size: 16px;
          font-weight: 500;
          color: #333333;
        }

        .content-balance {
          display: flex;
          justify-content: space-between;
          padding: 10px 0;
          border-bottom: 1px solid #F1F2F5;

          .label {
            color: #999999;
          }

          .value {
            color: #409EFE;
            font-weight: 600;
          }
        }

        .footer {
          display: flex;
          justify-content: flex-end;
          padding-top: 10px;
        }

        button {
          height: 32px !important;
          line-height: 32px !important;
          margin: 0 !important;
        }

        button[type="default"] {
          font-size: 14px !important;
          color: #409efe !important;
          border: 1px solid #409efe !important;
          background: #ffffff !important;
        }

        button+button {
          margin-left: 10px !important;
        }
      }
    }
  }
</style>